<template>
  <el-dialog v-model="dialogVisible" title="套餐详情" width="600">
    <el-row justify="space-around" :gutter="20">
      <el-col :span="18">
        <el-descriptions border column="1">
          <el-descriptions-item label="套餐名称">{{
    setmealInfo.name
  }}</el-descriptions-item>
          <el-descriptions-item label="套餐价格">&yen;{{ setmealInfo.price / 100 }}</el-descriptions-item>
          <el-descriptions-item label="销售状态">{{
    setmealInfo.status ? '起售' : '停售'
  }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="6">
        <el-image style="width: 125px; height: 125px" :src="'/api/common/download?name=' + setmealInfo.image"
          fit="fill" />
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data="setmealInfo.setmealDishes" max-height="300">
          <el-table-column label="序号" type="index" index="1" width="55" align="center" />
          <el-table-column label="菜品名称" prop="name" />

          <el-table-column label="数量" prop="copies" width="120px" />
          <el-table-column label="单品价格" prop="amount" width="120px">
            <template #default="subScope">
              &yen;{{ subScope.row.price / 100 }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { reqGetSetmealById } from '@/api/setmeal'
import { ElMessage } from 'element-plus'

//给当前组件命名
defineOptions({
  name: 'SetmealDetail'
})

const dialogVisible = ref(false)

// 本套餐中的菜品、份数等信息
const setmealInfo = ref([])

// 打开对话框，立即发请求获取本套餐的详情数据
const open = async (setmealId) => {
  const res = await reqGetSetmealById(setmealId)

  if (res.data.code === 200) {
    setmealInfo.value = res.data.data
    dialogVisible.value = true
  } else {
    ElMessage.error('未查询到此套餐的详情')
  }
}

defineExpose({
  open
})
</script>

<style scoped></style>
